<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <pre>
      项目笔记：
        1. 项目环境：
              开发环境： 你现在在开发的环境 就是开发环境： development， 一般都是ip地址： 192.168.110.110
              测试环境： 将项目部署测试环境 先测试 确保项目没有缺陷 test，     http:test.whj.com
              预发布环境： 模拟一个和真正的生产环境差不多
              生产环境： 将项目上线，  打版，发布一个新的版本                 http:prod.whj.com
           环境不一样，域名请求地址是不是不一样？
              一种就是： 人工手动修改域名配置， 容易出错或者忘了
              第二种配置文件： 自动判断环境
        2. 跨域：

          为啥有跨域：
            为了安全考虑，浏览器有同源策略限制,
          什么是同源策略？
            同端口 
            同协议 http https ftp  tcp  udp   
            同域名同ip 
          跨域报啥错？
            红色   access-  cors
          跨域如何解决？
            我了解有 
            jsonp(实现原理)   动态创建script标签 不受同源影响   前后端约定好函数名称  后端将数据包裹在回调函数里  前端调用可以获取到
            cors 跨域资源共享  后端设置允许访问的请求头，前端就可以访问了 
            nginx反向代理  

            但是我在vue项目里 在vue.config.js里配置proxy 设置反向代理，这个是开发环境
            生产环境如何？  生产环境是 用nginx设置conf 文件夹里的nginx.conf配置反向代理，
            配置proxy_pass 代理路径
            一般是运维去做，接触的少

        3. 如何将项目部署到服务器上
        
            前置条件： 
                1. 首页你要有一个服务器： 阿里云 腾讯云 华为云 移动云  七牛云
                2. 有一个域名
                3. nginx部署
                4. 如果是国内服务器要icp 备案
                5. 域名解析
                6. 要配置安全组  选好支持的端口号
                7. 如何用nginx 部署到服务器 让用户访问
         4. 用pm2 管理nodejs进程

         5. 路由守卫

              全局前置导航守卫：  
                                  router.beforeEach( (to, from, next) => {
                                       // to 要跳转的页面的路由的信息
                                       // from 从哪个页面跳转过来的
                                       // next() 一定执行一次 不然页面不能正常跳转  next('/login')
                                       
                                  })
              全局解析守卫       router.beforeResolve  

              全局后置钩子：     router.afterEach( (to, from) => {})
              路由独享守卫       beforeEnter
              组件内的守卫       beforeRouteEnter  beforeRouteUpdate beforeRouteLeave
              
         6. 断点调试 debugger

         7. 自定义指令  ---- 项目里 用指令解决图片加载失败
            directives: {
              kky: {
                inserted(el) {
                  el.focus();
                },
              },
            },
        8. token 过期如何处理？
            1. 在axios响应拦截器里，获取token 过期的状态码，判断如果是10002，就直接调到登录页，用户直接重新登录
            2.                                    { token, refretoken }  调后端接口 获取新的token
            3. 登录保留登录的时间， 判断以后每次当前时间是否过期，重新登录
       
        9: 动态路由：
              需要权限访问的路由 是动态路由

        10.  路由实现的原理
              根据url地址的变化，加载不同对应的组件
              路由分 
                hash: 通过onhashchange事件，监听hash的变化
                history: 通过html5 api新特性里的  onpopState 事件 监听url的变化 通过 pushstate replacestate来实现页面的跳转
        11. npm run build 打包后 你遇到啥问题？
            
            白屏问题：
                publicPath:"./"

                href=/static/js/chunk-elementUI.f46b3a65.js  
                如果 你在www.baidu.com  https://www.baidu.com/static/js/chunk-elementUI.f46b3a65.js
                如果你在www.ttt.com   https://www.ttt.com/static/js/chunk-elementUI.f46b3a65.js
       12. 封装通用全局组件 需要用到
            export default {
              install(Vue,option){
                Vue.component('PageTools', PageTools)
                组件
                指令
                混入
                挂载vue原型
              }
            }

        13. 登录模块：
            
            1.完成登录的静态页面，完成form表单验证。
            2.输入用户名密码，点击按钮登录，在发送请求之前 要先使用插件MD5对密码加密，然后将请求发送给后台
            3.在登录按钮绑定事件，触发Vuex里的User 模块下的Action 方法login. 在Action的login 方法触发登录请求，
            4.我们项目里所有的请求都是按照模块分来，登录请求方法封装在user.js, 这里还需要依赖axios的封装，
            5.通过axiso的create创建axios实例，里面有几个属性，baseURL,timeout, baseUrl是请求的根路径，
              这里 baseRUL 是变量 是node。process取得值，npm run dev ==>  加载 .env.development文件
              npm run build: 就会加载.env.production ,还有请求拦截器和响应拦截器。
            6.action登录拿到数据以后，将数据通过mutation 将后端返回的token，保存vuex里，并使用js-cookie插件保存到cookie
            7. 在vue.config.js 里通过proxy devServer里配置反向代理
            8. 在axios拦截器里，将token注入。config.headers.common["Authorization"] = 'Bearer ${token}'


        14. 权限模块：
            
            1. 我们后台采用RBAC基于用户角色分配权限实现， 将角色分配给用户，将权限分配给角色
            2 权限分为三个方面： 
                第一个是 页面的访问权限
                第二个是 页面上的按钮的功能权限
                第三个是 api访问权限，一般都是后端来做
            3. 先说一下页面的访问权限，
                01 用户登录后 会调用 用户信息接口，拿到该用户能访问的页面的权限标识，这个字段在 roles对象里的menus数组里
                02 在Vuex的 Permission模块的aCtion的 filterRoutes方法，将路由的name和权限标识，做一个过滤，返回用户能访问的页面的路由，将 动态路由和静态路由合并保存到vuex里
                03 使用Router.addRoutes方法 将该动态路由添加到路由表中。  next(to.path)
                04 从vuex的取routes 渲染在左侧菜单。
              
            4. 说说按钮的权限实现：
               全局混入Vue.mixin 一个公用的方法 checkPermission,在方法里传入一个固定的权限按钮标识，
               获取vuex的用户信息的控制按钮权限的所有标识，points: ['','']
               用数组的some方法 查看points是否有传入的字段相同的，有的话就返回true,否则返回false.



            
            
               

            
            

        

        

          
        
    </pre>
  </body>
</html>
